import React, { useState } from "react";
import { Card, Button, Form, Input, message } from "antd";
import "./basicInfo.less";
const tabList = [
  {
    key: "tab1",
    tab: "基本资料",
  },
  {
    key: "tab2",
    tab: "修改密码",
  },
];
let userIofr = JSON.parse(localStorage.getItem("userIofr"))
const contentList = (key, form) => {
  const onFinish = values => {
    console.log("form",form);
    let againPassword = values.againPassword;
    let newPassword = values.newPassword;
    if (againPassword !== newPassword) {
      message.error("新密码与旧密码不相同");
    } else {
      if (userIofr.password!=values.oldPassword) {
        message.error("旧密码输入错误");
      }else{
        userIofr.password=values.newPassword
        localStorage.setItem("userIofr",JSON.stringify(userIofr))
        message.success("修改密码成功");
        form.resetFields()
        // form.setFieldsValue({againPassword:'',oldPassword:'',newPassword:''})
      }
    }
    console.log("Success:", values);
  };
  
  return key === "tab1" ? (
    <div className='baseInfo'>
    {userIofr?.iofrList?.map((item, index) => (
      <div className='item' key={index}>
        <div className='infoLeft'>{item.lable}:</div>
        <div className='infoLeft'>{item.props}</div>
      </div>
    ))}
    <div className='item'>
      <div className='infoLeft'>性别:</div>
      <div className='infoLeft'>{userIofr?.gender}</div>
    </div>
  </div>
  ) : (
    <div className='changePassword'>
      <div>
        <Form
          form={form}
          name='basic'
          labelCol={{
            span: 0,
          }}
          wrapperCol={{
            span: 16,
          }}
          onFinish={onFinish}
          autoComplete='off'>
          <Form.Item
            label='请输入旧密码'
            name='oldPassword'
            rules={[
              {
                required: true,
                message: "请输入旧密码",
              },
            ]}>
            <Input />
          </Form.Item>
          <Form.Item
            label='请输入新密码'
            name='newPassword'
            rules={[
              {
                required: true,
                message: "请输入新密码",
              },
            ]}>
            <Input.Password />
          </Form.Item>
          <Form.Item
            label='请再次输入新密码'
            name='againPassword'
            rules={[
              {
                required: true,
                message: "请再次输入新密码",
              },
            ]}>
            <Input.Password />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}>
            <Button type='primary' htmlType='submit'>
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
const BasicInfo = () => {
  const [activeTabKey1, setActiveTabKey1] = useState("tab1");
  const [form] = Form.useForm();
  const onTab1Change = key => {
    setActiveTabKey1(key);
  };

  return (
    <div>
      <Card
        style={{ width: "100%" }}
        title='基本资料'
        tabList={tabList}
        activeTabKey={activeTabKey1}
        onTabChange={key => {
          onTab1Change(key);
        }}>
        {contentList(activeTabKey1, form)}
      </Card>
    </div>
  );
};
export default BasicInfo;